<script setup lang="ts">
import RightDrawer from './RightDrawer.vue'
const show = ref(false)
const drawerRef = ref()
const openMenu = () => {
  show.value = !show.value
  if (show.value) {
    drawerRef.value?.open()
  } else {
    drawerRef.value?.close()
  }
}
const closeChange = () => {
  show.value = false
}
</script>

<template>
  <div class="menu" :class="{ 'menu-active': show }" @click="openMenu">
    <div class="line line-first"></div>
    <div class="line line-two"></div>
    <div class="line line-three"></div>
  </div>
  <right-drawer ref="drawerRef" @close="closeChange" />
</template>

<style scoped lang="scss">
.menu {
  position: relative;
  z-index: 999;
  .line {
    width: 18px;
    height: 2px;
    background-color: #000;
    transition: all 0.25s ease-in-out;
    margin-bottom: 4px;
  }
  &-active {
    .line {
      &-first {
        transform: translateY(7px) translateY(-50%) rotate(-45deg);
      }
      &-two {
        opacity: 0;
      }
      &-three {
        transform: translateY(-7px) translateY(50%) rotate(45deg);
      }
    }
  }
}
</style>
